<template>
    <!-- 刷新 -->
    <el-button type="warning" size="small" @click=""><el-icon>
            <Refresh />
        </el-icon>刷新</el-button>
    <el-table :data="logList" style="width: 100%">
        <el-table-column label="序号" prop="l_id" width="100px" />
        <el-table-column label="时间" prop="logtime" width="250px" />
        <el-table-column label="用户名" prop="username" width="150px" />
        <el-table-column label="昵称" prop="nick" width="150px" />
        <el-table-column label="日志内容" prop="content">
            <template #default="scope">
                <p v-html="content"></p>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="搜索日志" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="total" @click="changePage" />
    </div>
    <el-dialog title="修改日志" width="40%">
        <!-- v-mode组件双向通讯 props: modelValue  事件 update:modelValue
             v-model:age  props: age   update:age 

             示例:v-model="disableAccountAdd"
                  执行emit('update:modelValue',false)  =>将false值赋值给 disableAccountAdd=false
        -->
        <!-- <AccountAddDialog @close="closeDialog"></AccountAddDialog> -->
        <EditLog v-model="disableAddRoleForm"></EditLog>
    </el-dialog>
</template>

<script setup lang='ts'>
import { getLog, AddLog } from '../../../hooks/log'
import { onMounted, watch } from 'vue';
import EditLog from '../../../components/EditLog.vue'
onMounted(() => {
    getLogList()
    console.log('total.value>>总数', total);
})

const { getLogList, logList, search, total, currentNo, changePage, handleDelete, handleEdit, disableAddRoleForm } = getLog()

const { logAccount } = AddLog()

watch(currentNo, () => {
    getLogList()
    console.log('currentNo>>123页码', currentNo.value);

})

</script>
<style lang='less' scoped>
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}
</style>
